<template>
  <div style="background: #f4f4f4" class="bd">
    <div class="header">
      <h3>
        购物车<span style="font-size: 12px">({{ allInfo.allNum }})</span>
      </h3>
      <div @click="handleChange" :class="this.bool ? 'changeB' : ''">
        <span>管理<van-icon v-if="this.bool" name="cross" /></span>
      </div>
    </div>
    <div class="nul" v-if="!cartList.length">
      <img src="../assets/img/asd.png" alt="" />
      <p>购物车竟然是空的</p>
      <p>再忙，也要记得买点什么犒赏自己~</p>
    </div>
    <div class="banner" v-for="(item, index) in cartList" :key="item.id">
      <h4><van-icon name="shop-o" /> {{ item.shopname }}</h4>
      <van-swipe-cell>
        <van-checkbox
          class="check"
          v-model="item.is_checked"
          checked-color="#ee0a24"
          ><span @click="handleCheck(index)"></span
        ></van-checkbox>
        <van-card
          :price="item.shop_price"
          :title="item.product"
          class="goods-card"
          :thumb="item.product_img"
        />
        <div class="bt">
          <van-button
            icon="minus"
            :disabled="item.num <= 1"
            @click="handleNum(index, false)"
            square
            size="small"
          />
          <span>{{ item.num }}</span>
          <van-button
            icon="plus"
            :disabled="item.num >= 10"
            @click="handleNum(index)"
            square
            size="small"
          />
        </div>
        <template #right>
          <van-button 
          @click="handleDelOne(index)"
            square
            text="删除"
            type="danger"
            class="delete-button button1"
          />
        </template>
      </van-swipe-cell>
    </div>
    <div class="section">
      <div><img src="../assets/prite.png" alt="" /></div>
    </div>
    <van-submit-bar
      :price="allInfo.checkPrice * 100"
      :button-text="'提交订单(' + allInfo.checkNum + ')'"
      @submit="onSubmit"
    >
      <van-checkbox
        class="z"
        v-model="allInfo.allChecked"
        checked-color="#ee0a24"
        ><span class="p" @click="handleAllCheck"></span>全选</van-checkbox
      >
      <div v-if="this.bool" @click="handleDel" class="changeB db">
        <span>删除({{ allInfo.checkNum }})</span>
      </div>
      <template> </template>
    </van-submit-bar>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="dd">
        <div class="d1" v-for="(item, index) in this.list" :key="index">
          <img
            :src="`https://chadian-img.oss-cn-shanghai.aliyuncs.com/${item.picurl}`"
          />
          <p>{{ item.productname }}</p>
          <p>
            <span>${{ item.activityprice }}</span
            ><span>{{ item.buycount }}人付款</span>
          </p>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { getCartList } from "../api/ddk-api";
export default {
  computed: {
    cartList() {
      return this.$store.state.ddk.cartList;
    },
    allInfo() {
      return this.$store.getters["ddk/allInfo"];
    },
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      num: 1,
      active: true,
      bool: false,
    };
  },

  methods: {
    handleChange() {
      this.bool = !this.bool;
      let div = document.querySelector(".van-submit-bar__text");
      let btn = document.querySelector(".van-submit-bar__button--danger");
      if (this.bool) {
        btn.style.display = "none";
        div.style.display = "none";
      } else {
        btn.style.display = "block";
        div.style.display = "block";
      }
    },
    handleCheck(idx) {
      return this.$store.commit("ddk/checkMut", idx);
    },
    handleAllCheck() {
      let bool = this.allInfo.allCheck;
      return this.$store.commit("ddk/AllCheckMut", bool);
    },
    handleNum(idx, bool = true) {
      console.log(idx);
      return this.$store.commit("ddk/addNumMut", { idx, bool });
    },
    handleDel() {
      this.$dialog.confirm({
        title: "标题",
        message: "确定要删除宝贝?",
      })
        .then(() => {
           return this.$store.commit("ddk/DelCheckMut");
        })
        .catch(() => {
          // on cancel
        });
    },
    handleDelOne(idx){
        this.$dialog.confirm({
        title: "标题",
        message: "确定要删除宝贝?",
      })
        .then(() => {
           return this.$store.commit("ddk/DelOneMut",idx);
        })
        .catch(() => {
          // on cancel
        });
    },
    onSubmit() {
      if (this.cartList.length) {
        this.$router.push("/Checkout");
      } else if (this.cartList.is_checked != true) {
        this.$toast("你还没有选择任何商品哦");
      } else {
        this.$toast("你还没有选择任何商品哦");
      }
    },
    onLoad() {
      getCartList(this.num).then((res) => {
        let { list } = res.data.data;
        if (list.length) {
          this.list = [...this.list, ...list];
          this.num++;
        } else {
          this.finished = true;
        }
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.nul {
  text-align: center;
  height: 179px;
  padding: 5px 0;
  margin-top: 30px;
  img {
    height: 83px;
    width: 83px;
  }
  p:nth-of-type(1) {
    margin-top: 5px;
    font-size: 15px;
  }
  p:nth-of-type(2) {
    margin-top: 5px;
    font-size: 12px;
    color: #969799;
  }
}
.section {
  height: 15px;
  width: 100%;
  margin: 10px 0;
  div {
    width: 130px;
    height: 15px;
    position: relative;
    margin: auto;
    overflow: hidden;
    img {
      width: 150%;
      position: absolute;
      right: 4px;
      bottom: 0;
    }
  }
}
.van-submit-bar__bar {
  justify-content: space-between;
}
.db {
  height: 33px;
  width: 80px;
  text-align: center;
  line-height: 33px;
}
.changeB {
  display: inline-block;
  color: #ee0a24;
  padding: 0 0.16rem 0 0.21333rem;
  border: 1px solid red;
  background-color: rgba(238, 10, 36, 0.08);
  border-radius: 10em;
}
.van-submit-bar__button {
  width: 111px;
}
.van-card__price {
  color: red;
}
.z {
  position: relative;
}
.p {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-block;
  height: 20px;
  width: 20px;
}
.van-button--mini {
  height: 21px;
}
.bt {
  position: absolute;
  right: 26px;
  bottom: 8px;
  display: flex;
  align-items: center;
  span {
    padding: 5px 7px;
  }
}
.banner {
  margin-top: 20px;
  height: 157px;
  width: 368px;
  margin: auto;
  background: white;
  border-radius: 2%;
  position: relative;
  h4 {
    font-weight: 400;
    padding: 10px 0 0 30px;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 0 20px;
  //  height: 47px;
  //  width: 370px;
  //  background: #f4f4f4;
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   z-index: 9;
  h3 {
    margin: 0;
  }
}
.van-submit-bar {
  bottom: 49px;
}
.van-grid-item {
  height: 260px;
}
.dd {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 0 6px;
  margin-bottom: 30px;
}
.d1 {
  width: 189px;
  height: 280px;
  margin: 10px 0;
  font-size: 14px;
  text-align: center;
  border-radius: 3%;
  background: white;
  img {
    width: 179px;
    height: 179px;
  }
  p {
    margin: 0;
    padding: 5px;
    display: flex;
    text-align: left;
    > span:nth-of-type(1) {
      color: red;
      font-size: 15px;
      padding-right: 10px;
    }
    > span:nth-of-type(2) {
      font-size: 12px;
      color: #969799;
    }
  }
}
.delete-button {
  height: 100%;
}
.goods-card {
  margin: 0;
  background-color: white;
}
.van-card {
  padding: 5px 30px;
}
.check {
  position: absolute;
  top: 39px;
  left: 5px;
  z-index: 1;
}
</style>